<template>
  <div class="card-list">
    <div 
      v-for="(item, index) in filteredAchievements" 
      :key="index" 
      class="result-card"
      @click="handleCardClick(item)"
    >
      <div class="result-img">
        <i :class="item.icon"></i>
      </div>
      <div class="result-content">
        <div class="result-title">{{ item.title }}</div>
        <div class="result-desc">{{ item.description }}</div>
        <div class="result-tag" :class="item.type">{{ getTypeLabel(item.type) }}</div>
      </div>
    </div>
    <div v-if="filteredAchievements.length === 0" class="empty-state">
      <i class="el-icon-document"></i>
      <p>暂无相关成果</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const currentFilter = ref('all')

const achievements = ref([
  {
    title: '全国大学生数学竞赛一等奖',
    description: '2024年全国大学生数学竞赛中获得一等奖',
    icon: 'el-icon-trophy',
    type: 'competition'
  },
  {
    title: 'SCI论文发表',
    description: '在Nature子刊发表高水平论文',
    icon: 'el-icon-document',
    type: 'paper'
  },
  {
    title: '发明专利',
    description: '获得一项发明专利授权',
    icon: 'el-icon-coin',
    type: 'patent'
  },
  {
    title: '软件著作权',
    description: '获得一项软件著作权',
    icon: 'el-icon-suitcase',
    type: 'software'
  },
  {
    title: '创新创业大赛金奖',
    description: '获得全国大学生创新创业大赛金奖',
    icon: 'el-icon-trophy',
    type: 'competition'
  },
  {
    title: '优秀学生干部',
    description: '获得校级优秀学生干部称号',
    icon: 'el-icon-user',
    type: 'competition'
  }
])

const filteredAchievements = computed(() => {
  if (currentFilter.value === 'all') {
    return achievements.value
  }
  return achievements.value.filter(item => item.type === currentFilter.value)
})

const handleCardClick = (item) => {
  ElMessage({
    message: `查看${item.title}详情`,
    type: 'info',
    duration: 1500
  })
}

const handleFilter = (type) => {
  currentFilter.value = type
}

const getTypeLabel = (type) => {
  const typeMap = {
    competition: '竞赛获奖',
    paper: '论文发表',
    patent: '专利',
    software: '软件著作权'
  }
  return typeMap[type] || '其他'
}

defineExpose({
  handleFilter,
  filteredAchievements
})
</script>

<style scoped>
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  margin-bottom: 32px;
  min-height: 200px;
}

.result-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  padding: 24px;
  min-height: 120px;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.empty-state i {
  font-size: 48px;
  color: #d0d0d0;
  margin-bottom: 16px;
}

.empty-state p {
  color: #666;
  font-size: 16px;
}

.result-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7ac143 0%, #8edc5a 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.result-card:hover::before {
  opacity: 1;
}

.result-img {
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 42px;
  color: #d0d0d0;
  transition: all 0.3s ease;
}

.result-card:hover .result-img {
  transform: scale(1.05) rotate(5deg);
  background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
}

.result-content {
  flex: 1;
  position: relative;
}

.result-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #333 0%, #666 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease;
}

.result-card:hover .result-title {
  transform: translateX(4px);
}

.result-desc {
  color: #666;
  font-size: 15px;
  line-height: 1.5;
  transition: all 0.3s ease;
}

.result-card:hover .result-desc {
  color: #333;
}

.result-tag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

.result-tag.competition {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%);
}

.result-tag.paper {
  background: linear-gradient(135deg, #4dabf7 0%, #74c0fc 100%);
}

.result-tag.patent {
  background: linear-gradient(135deg, #51cf66 0%, #69db7c 100%);
}

.result-tag.software {
  background: linear-gradient(135deg, #845ef7 0%, #9775fa 100%);
}

@media screen and (max-width: 1024px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
}

@media screen and (max-width: 768px) {
  .card-list {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }

  .result-card {
    padding: 16px;
    min-height: 100px;
  }

  .result-img {
    width: 72px;
    height: 72px;
    font-size: 32px;
    margin-right: 16px;
  }

  .result-title {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .result-desc {
    font-size: 14px;
  }

  .result-tag {
    font-size: 11px;
    padding: 3px 10px;
  }
}
</style> 